<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全国新华书店销售数据分析大屏</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", sans-serif;
        }
        
        body {
            background-color: #0a1a35;
            color: #fff;
            overflow-x: hidden;
            padding: 10px;
        }
        
        .dashboard {
            width: 100%;
            min-height: 100vh;
            position: relative;
        }
        
        .header {
            text-align: center;
            padding: 15px 0;
            position: relative;
            margin-bottom: 15px;
        }
        
        .header h1 {
            font-size: 36px;
            color: #fff;
            text-shadow: 0 0 10px #1e90ff;
            letter-spacing: 3px;
            margin-bottom: 5px;
        }
        
        .header p {
            font-size: 16px;
            color: #7cb9ff;
        }
        
        .time-stamp {
            position: absolute;
            right: 20px;
            top: 20px;
            font-size: 14px;
            color: #7cb9ff;
        }
        
        .kpi-container {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
        }
        
        .kpi-card {
            background: rgba(16, 36, 68, 0.8);
            border: 1px solid #1e4a8b;
            border-radius: 5px;
            padding: 15px;
            flex: 1;
            margin: 0 8px;
            box-shadow: 0 0 10px rgba(30, 144, 255, 0.2);
            text-align: center;
            transition: all 0.3s;
        }
        
        .kpi-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(30, 144, 255, 0.4);
        }
        
        .kpi-title {
            font-size: 14px;
            color: #7cb9ff;
            margin-bottom: 10px;
        }
        
        .kpi-value {
            font-size: 26px;
            font-weight: bold;
            color: #fff;
            margin-bottom: 5px;
        }
        
        .kpi-trend {
            font-size: 12px;
            color: #00ff8c;
        }
        
        .trend-down {
            color: #ff4d4d;
        }
        
        .chart-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: auto auto;
            gap: 15px;
            margin-bottom: 20px;
        }
        
        .chart-card {
            background: rgba(16, 36, 68, 0.8);
            border: 1px solid #1e4a8b;
            border-radius: 5px;
            padding: 15px;
            box-shadow: 0 0 10px rgba(30, 144, 255, 0.2);
        }
        
        .chart-title {
            font-size: 16px;
            color: #7cb9ff;
            margin-bottom: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .chart-content {
            height: 300px;
        }
        
        .full-width {
            grid-column: 1 / span 2;
        }
        
        .map-container {
            height: 500px;
        }
        
        .footer {
            display: flex;
            justify-content: space-between;
            padding: 10px 20px;
            background: rgba(16, 36, 68, 0.8);
            border-top: 1px solid #1e4a8b;
            font-size: 14px;
            color: #7cb9ff;
        }
        
        .decoration {
            position: absolute;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, transparent, #1e90ff, transparent);
            bottom: 0;
            left: 0;
        }
        
        .pulse {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #00ff8c;
            margin-right: 5px;
            animation: pulse 1.5s infinite;
        }
        
        @keyframes pulse {
            0% { opacity: 0.5; }
            50% { opacity: 1; }
            100% { opacity: 0.5; }
        }
    </style>
</head>
<body>
    <div class="dashboard">
        <div class="header">
            <h1>全国新华书店销售数据分析大屏</h1>
            <p>赋能实体书店，驱动智慧增长</p>
            <div class="time-stamp">数据更新时间: <span id="update-time">2023-11-15 14:30:15</span></div>
        </div>
        
        <div class="kpi-container">
            <div class="kpi-card">
                <div class="kpi-title">累计销售额 (万元)</div>
                <div class="kpi-value">856,200</div>
                <div class="kpi-trend">↑ 12.5% 同比增长</div>
            </div>
            <div class="kpi-card">
                <div class="kpi-title">完成年度目标</div>
                <div class="kpi-value">78%</div>
                <div class="kpi-trend">超额完成季度目标</div>
            </div>
            <div class="kpi-card">
                <div class="kpi-title">今日实时销售额 (万元)</div>
                <div class="kpi-value">1,258</div>
                <div class="kpi-trend"><span class="pulse"></span>实时更新</div>
            </div>
            <div class="kpi-card">
                <div class="kpi-title">动销品种数</div>
                <div class="kpi-value">1,245,678</div>
                <div class="kpi-trend">↑ 5.2% 同比增长</div>
            </div>
            <div class="kpi-card">
                <div class="kpi-title">全国门店总数</div>
                <div class="kpi-value">12,350</div>
                <div class="kpi-trend">覆盖全国98%地级市</div>
            </div>
        </div>
        
        <div class="chart-container">
            <div class="chart-card">
                <div class="chart-title">
                    <span>销售趋势分析</span>
                    <span style="font-size: 12px;">销售旺季：7-8月，12月</span>
                </div>
                <div class="chart-content" id="sales-trend"></div>
            </div>
            
            <div class="chart-card">
                <div class="chart-title">
                    <span>图书品类分析</span>
                    <span style="font-size: 12px;">教辅教材占比最高</span>
                </div>
                <div class="chart-content" id="category-analysis"></div>
            </div>
            
            <div class="chart-card">
                <div class="chart-title">
                    <span>门店效能排行</span>
                    <span style="font-size: 12px;">销售额Top 10门店</span>
                </div>
                <div class="chart-content" id="store-performance"></div>
            </div>
            
            <div class="chart-card">
                <div class="chart-title">
                    <span>实时销售动态</span>
                    <span style="font-size: 12px;">今日实时订单数: 8,542</span>
                </div>
                <div class="chart-content" id="real-time-sales"></div>
            </div>
            
            <div class="chart-card full-width">
                <div class="chart-title">
                    <span>区域销售分布</span>
                    <span style="font-size: 12px;">核心市场：北京、上海、江苏、广东</span>
                </div>
                <div class="chart-content map-container" id="regional-distribution"></div>
            </div>
        </div>
        
        <div class="footer">
            <div>数据来源：全国新华书店ERP系统、线上商城</div>
            <div>技术支持：大数据分析平台</div>
        </div>
    </div>

    <script>
        // 初始化所有图表
        document.addEventListener('DOMContentLoaded', function() {
            // 销售趋势分析
            const salesTrendChart = echarts.init(document.getElementById('sales-trend'));
            const salesTrendOption = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['销售额', '订单量'],
                    textStyle: {
                        color: '#7cb9ff'
                    },
                    top: 10
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    axisLine: {
                        lineStyle: {
                            color: '#1e4a8b'
                        }
                    },
                    axisLabel: {
                        color: '#7cb9ff'
                    }
                },
                yAxis: [
                    {
                        type: 'value',
                        name: '销售额(万元)',
                        nameTextStyle: {
                            color: '#7cb9ff'
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#1e4a8b'
                            }
                        },
                        axisLabel: {
                            color: '#7cb9ff'
                        },
                        splitLine: {
                            lineStyle: {
                                color: 'rgba(30, 74, 139, 0.5)'
                            }
                        }
                    },
                    {
                        type: 'value',
                        name: '订单量',
                        nameTextStyle: {
                            color: '#7cb9ff'
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#1e4a8b'
                            }
                        },
                        axisLabel: {
                            color: '#7cb9ff'
                        },
                        splitLine: {
                            show: false
                        }
                    }
                ],
                series: [
                    {
                        name: '销售额',
                        type: 'line',
                        yAxisIndex: 0,
                        data: [65210, 58420, 72350, 69480, 71230, 73560, 125430, 118520, 85420, 79350, 81240, 134520],
                        lineStyle: {
                            color: '#1e90ff'
                        },
                        itemStyle: {
                            color: '#1e90ff'
                        },
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: 'rgba(30, 144, 255, 0.5)' },
                                { offset: 1, color: 'rgba(30, 144, 255, 0.1)' }
                            ])
                        }
                    },
                    {
                        name: '订单量',
                        type: 'bar',
                        yAxisIndex: 1,
                        data: [125420, 112350, 132480, 128520, 130450, 135620, 245680, 238450, 152360, 142580, 148520, 254680],
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#00ff8c' },
                                { offset: 1, color: 'rgba(0, 255, 140, 0.5)' }
                            ])
                        }
                    }
                ]
            };
            salesTrendChart.setOption(salesTrendOption);
            
            // 图书品类分析
            const categoryChart = echarts.init(document.getElementById('category-analysis'));
            const categoryOption = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    right: 10,
                    top: 'center',
                    textStyle: {
                        color: '#7cb9ff'
                    }
                },
                series: [
                    {
                        name: '品类销售',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        center: ['40%', '50%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderColor: '#0a1a35',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 18,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 285420, name: '教辅教材' },
                            { value: 198520, name: '少儿读物' },
                            { value: 152360, name: '文学小说' },
                            { value: 98520, name: '经管科技' },
                            { value: 75420, name: '生活艺术' },
                            { value: 46320, name: '其他' }
                        ],
                        color: ['#1e90ff', '#00ff8c', '#ffaa00', '#ff4d4d', '#9d4dff', '#4dc7ff']
                    }
                ]
            };
            categoryChart.setOption(categoryOption);
            
            // 门店效能排行
            const storeChart = echarts.init(document.getElementById('store-performance'));
            const storeOption = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: '#1e4a8b'
                        }
                    },
                    axisLabel: {
                        color: '#7cb9ff'
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(30, 74, 139, 0.5)'
                        }
                    }
                },
                yAxis: {
                    type: 'category',
                    data: ['上海书城', '北京王府井书店', '广州购书中心', '深圳书城', '南京新街口书店', '成都购书中心', '武汉光谷书城', '杭州解放路书店', '西安钟楼书店', '重庆解放碑书店'],
                    axisLine: {
                        lineStyle: {
                            color: '#1e4a8b'
                        }
                    },
                    axisLabel: {
                        color: '#7cb9ff'
                    }
                },
                series: [
                    {
                        name: '销售额',
                        type: 'bar',
                        data: [12580, 11850, 9850, 9420, 8850, 8420, 7850, 7420, 6980, 6520],
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                { offset: 0, color: '#1e90ff' },
                                { offset: 1, color: '#00ff8c' }
                            ])
                        },
                        label: {
                            show: true,
                            position: 'right',
                            color: '#fff'
                        }
                    }
                ]
            };
            storeChart.setOption(storeOption);
            
            // 实时销售动态
            const realTimeChart = echarts.init(document.getElementById('real-time-sales'));
            const realTimeOption = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00'],
                    axisLine: {
                        lineStyle: {
                            color: '#1e4a8b'
                        }
                    },
                    axisLabel: {
                        color: '#7cb9ff'
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '销售额(万元)',
                    nameTextStyle: {
                        color: '#7cb9ff'
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#1e4a8b'
                        }
                    },
                    axisLabel: {
                        color: '#7cb9ff'
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(30, 74, 139, 0.5)'
                        }
                    }
                },
                series: [
                    {
                        name: '实时销售额',
                        type: 'line',
                        data: [85, 125, 185, 210, 165, 142, 158, 175, 192, 210, 235, 198],
                        smooth: true,
                        lineStyle: {
                            color: '#ffaa00',
                            width: 3
                        },
                        itemStyle: {
                            color: '#ffaa00'
                        },
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: 'rgba(255, 170, 0, 0.5)' },
                                { offset: 1, color: 'rgba(255, 170, 0, 0.1)' }
                            ])
                        }
                    }
                ]
            };
            realTimeChart.setOption(realTimeOption);
            
            // 区域销售分布 - 使用模拟的简化地图数据
            const regionalChart = echarts.init(document.getElementById('regional-distribution'));
            const regionalOption = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}<br/>销售额: {c}万元'
                },
                visualMap: {
                    type: 'piecewise',
                    pieces: [
                        {min: 80000, label: '核心市场', color: '#1e3f72'},
                        {min: 50000, max: 79999, label: '增长市场', color: '#2a5caa'},
                        {min: 30000, max: 49999, label: '潜力市场', color: '#3a7bd5'},
                        {min: 10000, max: 29999, label: '发展中市场', color: '#5c9ce6'},
                        {min: 0, max: 9999, label: '新兴市场', color: '#89c2f0'}
                    ],
                    textStyle: {
                        color: '#7cb9ff'
                    },
                    left: 'left',
                    top: 'bottom'
                },
                series: [
                    {
                        name: '销售额',
                        type: 'map',
                        map: 'china',
                        roam: true,
                        label: {
                            show: true,
                            color: '#fff',
                            fontSize: 10
                        },
                        emphasis: {
                            label: {
                                color: '#fff',
                                fontSize: 12
                            },
                            itemStyle: {
                                areaColor: '#ffaa00'
                            }
                        },
                        data: [
                            {name: '北京', value: 98520},
                            {name: '上海', value: 92450},
                            {name: '江苏', value: 86520},
                            {name: '广东', value: 84210},
                            {name: '浙江', value: 78520},
                            {name: '四川', value: 65210},
                            {name: '湖北', value: 58420},
                            {name: '山东', value: 55230},
                            {name: '河南', value: 51240},
                            {name: '湖南', value: 48520},
                            {name: '福建', value: 45210},
                            {name: '安徽', value: 41250},
                            {name: '河北', value: 38520},
                            {name: '陕西', value: 35210},
                            {name: '辽宁', value: 32520},
                            {name: '重庆', value: 29850},
                            {name: '江西', value: 28520},
                            {name: '广西', value: 25210},
                            {name: '云南', value: 23210},
                            {name: '黑龙江', value: 19850},
                            {name: '吉林', value: 18520},
                            {name: '山西', value: 17520},
                            {name: '贵州', value: 16520},
                            {name: '新疆', value: 14210},
                            {name: '甘肃', value: 12520},
                            {name: '内蒙古', value: 11520},
                            {name: '海南', value: 9850},
                            {name: '宁夏', value: 6520},
                            {name: '青海', value: 4520},
                            {name: '西藏', value: 2850},
                            {name: '台湾', value: 18520},
                            {name: '香港', value: 12450},
                            {name: '澳门', value: 3250}
                        ]
                    }
                ]
            };
            
            // 加载中国地图数据
            fetch('https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json')
                .then(response => response.json())
                .then(chinaJson => {
                    echarts.registerMap('china', chinaJson);
                    regionalChart.setOption(regionalOption);
                })
                .catch(error => {
                    console.error('加载地图数据失败:', error);
                    // 如果加载失败，使用备用方案 - 显示一个提示
                    regionalChart.setOption({
                        title: {
                            text: '地图数据加载中...',
                            left: 'center',
                            top: 'center',
                            textStyle: {
                                color: '#7cb9ff',
                                fontSize: 20
                            }
                        }
                    });
                });
            
            // 更新时间
            function updateTime() {
                const now = new Date();
                const timeStr = now.getFullYear() + '-' + 
                               (now.getMonth()+1).toString().padStart(2, '0') + '-' + 
                               now.getDate().toString().padStart(2, '0') + ' ' + 
                               now.getHours().toString().padStart(2, '0') + ':' + 
                               now.getMinutes().toString().padStart(2, '0') + ':' + 
                               now.getSeconds().toString().padStart(2, '0');
                document.getElementById('update-time').textContent = timeStr;
            }
            
            // 初始更新时间
            updateTime();
            
            // 每秒更新一次时间
            setInterval(updateTime, 1000);
            
            // 窗口大小变化时重置图表大小
            window.addEventListener('resize', function() {
                salesTrendChart.resize();
                categoryChart.resize();
                storeChart.resize();
                realTimeChart.resize();
                regionalChart.resize();
            });
        });
    </script>
</body>
</html>